<script setup>
// 引入 Vue 的响应式工具
import { ref, onMounted } from 'vue'
// 引入 Vue Router，用于返回上一页
import { useRouter, useRoute } from 'vue-router'
// 引入 vant 的验证码倒计时组件
import { showToast } from 'vant'

// 初始化 router 实例
const router = useRouter()
const isdis = ref(true)
const isshow = ref(true)
const route=useRoute()
// 当前验证码输入内容（4位）
const code = ref(['', '', '', '']) // 初始化为4位空字符串
// 倒计时（单位：秒）
let countdown = ref(3) // 默认从60秒开始倒计时

// 每秒减少倒计时
// timer()
const timerr =
 ()=>{
  let timer=null;
  timer=setInterval(() => {
    if (countdown.value > 0) {
      countdown.value-- // 倒计时减少
    } else {
      clearInterval(timer) // 清除定时器
      isshow.value = false
      isdis.value = false
      countdown.value = 3
    }
  }, 1000)
 }
const click = () => {
  if (!isdis.value) {
    isshow.value = true
    isdis.value = true
    timerr()
    // return
  } else {
    return
  }
}
onMounted(() => {
  timerr()
})
// 提交验证码
const handleVerify = () => {
  const input = code.value.join('') // 将验证码数组拼接成字符串
  if (input.length === 4) {
    showToast({
      message: '验证码输入正确',
      type: 'success',
      onClose: () => {
        router.push(`/setmima?username=${route.query.username}`)
      }
    }) // 模拟提交行为
  } else {
    showToast('请输入完整的验证码') // 警告用户输入不完整
  }
}
</script>

<template>
  <!-- 顶部导航栏 -->
  <van-nav-bar title="忘记密码" left-arrow @click-left="router.back()" />

  <!-- 主体内容 -->
  <div style="padding: 24px; text-align: center;">
    <!-- 手机号提示 -->
    <div style="margin-bottom: 16px; color: #333;">
      短信验证码已发送至手机<br />
      +86 **** **** *{{ useRoute().query.phone?.slice(-2) }}
    </div>

    <!-- 验证码输入框，模拟4格 -->
    <div style="display: flex; justify-content: center; gap: 12px; margin-bottom: 16px;">
      <!-- 循环渲染每个输入格 -->
      <input v-for="(digit, index) in code" :key="index" v-model="code[index]" maxlength="1"
        style="width: 48px; height: 48px; font-size: 24px; text-align: center; border: 1px solid #ccc; border-radius: 8px;" />
    </div>

    <!-- 重新发送按钮和倒计时 -->
    <div style="margin-bottom: 24px; color: #999;">
      <!-- 倒计时显示 -->
      <span :style="{ color: isdis ? '' : 'blue' }" @click="click" aria-disabled="isdis">重新发送</span>

      短信验证码 <span v-show="isshow">{{ countdown }}s</span>
    </div>

    <!-- 底部按钮 -->
    <van-button block type="primary" @click="handleVerify" style="">
      验证
    </van-button>
  </div>
</template>

<style scoped>
/* 无需额外样式，基础样式已通过内联完成 */
</style>
